<template>
  <table :border="1" cellspacing="0" style="width: 100%">
    <thead>
      <tr>
        <th>作者</th>
        <th>标题</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data.list" :key="item.id">
        <td><img class="avatar" :src="item.author?.avatar_url" alt="" /></td>
        <td>{{ item.title }}</td>
        <td><router-link :to="`/detail/${item.id}`">详情</router-link></td>
      </tr>
    </tbody>
  </table>
  <div class="pagination">
    <a href="#" v-for="item in 10" @click="handlePageChange(item)">{{ item }}</a>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import { getListApi } from '@/api';
import { type ITopic } from '@/types/topic';
import { type IListRequest } from '@/types/request';

const data = reactive<{
  params: IListRequest;
  list: ITopic[];
}>({
  params: {
    page: 1,
    limit: 10,
    tab: '',
  },
  list: [],
});

const getList = () => {
  getListApi(data.params).then((res) => {
    data.list = res;
  });
};

onMounted(() => {
  getList();
});

const handlePageChange = (page: number) => {
  data.params.page = page;
  getList();
};
</script>

<style lang="scss" scoped>
.avatar {
  width: 50px;
  height: 50px;
}

.pagination {
  @include flex-wrap();
  justify-content: start;
}
</style>
